<template>
	<view class="page-container">
		<date-range-picker @change="handleChangeDate" />
		<top-amount :income="income" :expense="expense" />
		<bill-list :billList="billList" />
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'

	import DateRangePicker from '../../components/date-range-picker.vue';
	import TopAmount from './components/top-amount.vue';
	import BillList from './components/bill-list.vue';

	import { getBills } from '@/api/bill'

	const billList = ref([])
	const income = computed(()=>{
		let count = 0;
		billList.value.forEach(bill => {
			if (bill.type === 'income') {
				count += Number(bill.count);
			}
		});
		return count
	})
	const expense = computed(()=>{
		let count = 0;
		billList.value.forEach(bill => {
			if (bill.type === 'expenditure') {
				count -= Number(bill.count);
			}
		});
		return count
	})

	const handleChangeDate = async dateRange =>{
		const res = await getBills({
			dateRange
		})
		console.log(`【list/index】【获取账单结果】`, res)
		billList.value = res
	}
</script>

<style lang="less" scoped>
	.page-container{
		padding-top: 20rpx;
	}
</style>